<script setup>
import {computed, ref} from "vue";
import WOrgTags from "@/views/wflow/common/WOrgTags.vue";
import WOrgPicker from "@/views/wflow/common/WOrgPicker.vue";

const props = defineProps({
  type: {
    type: String
  },
  modelValue: {
    type: Object
  }
})

const _value = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
defineEmits(['update:modelValue'])

const orgPicker = ref()

const numberCompareOptions = [
  {name: '大于', symbol: 'GT'},
  {name: '小于', symbol: 'LT'},
  {name: '等于', symbol: 'EQ'},
  {name: '大于等于', symbol: 'GT_EQ'},
  {name: '小于等于', symbol: 'LT_EQ'},
  {name: '不等于', symbol: 'NEQ'},
  {name: '包含在', symbol: 'IN'},
  {name: '介于两者间', symbol: 'BT'},
]

const strCompareOptions = [
  {name: '含有字符串', symbol: 'HAS'},
  {name: '包含在', symbol: 'IN'},
  {name: '等于', symbol: 'EQ'},
  {name: '不等于', symbol: 'NEQ'}
]

function addOrg() {
  orgPicker.value.open()
}

function selectOk(orgs) {
  _value.value.compareVal = orgs
  orgPicker.value.close()
}

</script>

<template>
  <div>
    <template v-if="type === 'InitiatorOrg'">
      <el-text size="small">在某些部门内或为某些人之一</el-text>
      <el-divider direction="vertical"/>
      <el-button icon="Plus" size="small" type="primary" round @click="addOrg">选择人员/部门</el-button>
      <w-org-tags style="margin-top: 5px" v-model="_value.compareVal"/>
    </template>
    <template v-else-if="type === 'User'">

    </template>
    <template v-else-if="type === 'Dept'">

    </template>
    <template v-else-if="type === 'Number'">
      <el-select v-model="_value.compare" style="width: 30%;">
        <el-option v-for="op in numberCompareOptions" :key="op.symbol" :label="op.name" :value="op.symbol"/>
      </el-select>
      <el-divider direction="vertical"/>
      <template v-if="_value.compare === 'BT'">
        <el-input style="width: 30%;" type="number" v-model="_value.compareVal[0]" placeholder="左比较值"></el-input>
        ~
        <el-input style="width: 30%;" type="number" v-model="_value.compareVal[1]" placeholder="右比较值"></el-input>
      </template>
      <el-select v-else-if="_value.compare === 'IN'" multiple filterable
                 v-model="_value.compareVal" style="width: 65%;" placeholder="请输入选项">
        <el-option v-for="op in _value.compareVal" :key="op.symbol" :label="op.name" :value="op.name"/>
      </el-select>
      <el-input v-else type="number" style="width: 65%;" v-model="_value.compareVal[0]" placeholder="比较值"/>
    </template>
    <template v-else-if="type === 'String'">
      <el-select v-model="_value.compare" style="width: 30%;">
        <el-option v-for="op in strCompareOptions" :key="op.symbol" :label="op.name" :value="op.symbol"/>
      </el-select>
      <el-divider direction="vertical"/>
      <el-select v-if="_value.compare === 'IN'" multiple filterable allow-create
                 v-model="_value.compareVal" style="width: 65%;" placeholder="请输入选项">
        <el-option v-for="op in _value.compareVal" :key="op.symbol" :label="op.name" :value="op.name"/>
      </el-select>
      <el-input style="width: 65%;" v-else v-model="_value.compareVal[0]" placeholder="输入比较值"/>
    </template>
    <template v-else-if="type === 'Array'">

    </template>
    <template v-else-if="type === 'Date'">

    </template>
    <template v-else-if="type === 'DateRange'">

    </template>
    <w-org-picker multiple ref="orgPicker" :selected="_value.compareVal" @ok="selectOk"/>
  </div>
</template>

<style scoped lang="less">

</style>
